﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    *{margin:0;padding:0;}
    ul li{list-style-type:none;}
    </style>

    <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function()
        {
            $("a").click(function()
            {
                var div = $(this).parent().find("div");
                $(div).toggle();
            });
        });
    </script>

</head>
<body>
    <div style="position: absolute; top: 300px; left: 300px;width:300px;border:solid 1px #333;">
        <ul>
            <li><a href="#">评论</a>
                <div id="div1" style="height:300px;display:none;background-color:#f7f7f7;">
                    这里是评论列表                    
                </div>
            </li>
             <li><a href="#">评论</a>
                <div id="div2">
                    这里是评论列表
                </div>
            </li>
             <li><a href="#">评论</a>
                <div id="div3">
                    这里是评论列表
                </div>
            </li>
             <li><a href="#">评论</a>
                <div id="div4">
                    这里是评论列表
                </div>
            </li>
             <li><a href="#">评论</a>
                <div id="div5">
                    这里是评论列表
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
